<template>
  <table class="table is-striped is-fullwidth" style="min-height:250px;">
    <thead>
      <tr>
        <th
          :style="{width:col.width?col.width+'px':'',textAlign:col.align?col.align:''}"
          v-for="(col,i) in columns"
          :key="i"
        >
          <template v-if="col.type=='index'">序号</template>
          <template v-else-if="col.type=='selection'">
            <input @click="checkAllFun" type="checkbox" name="all" v-model="checkAll" />
          </template>
          <template v-else-if="col.type=='action'">{{col.title}}</template>
          <template v-else-if="col.sort">
            <div style="display:flex;cursor:pointer;" @click="sortFun(col.key)">
              <span>{{col.title}}</span>
              <div style="position:relative">
                <span class="arrow up" :class="{'active':isSort[col.key]%3==1}">▲</span>
                <span class="arrow down" :class="{'active':isSort[col.key]%3==2}">▲</span>
              </div>
            </div>
          </template>
          <template v-else>{{col.title}}</template>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(obj,i) in nowData" :key="i">
        <td
          :style="{width:col.width?col.width+'px':'',textAlign:col.align?col.align:''}"
          v-for="(col,j) in columns"
          :key="j"
        >
          <template v-if="col.type=='index'">{{i+1}}</template>
          <template v-else-if="col.type=='selection'">
            <input type="checkbox" :value="obj" name="rows" v-model="checkSingle" />
          </template>
          <template v-else-if="col.type=='action'">
            <div>
              <zx-btn
                style="margin-right:5px;"
                v-for="(btn,i) in col.btns"
                :key="i"
                :type="btn.type"
                :size="btn.size"
                :round="btn.round"
                :loading="btn.loading"
                @click="btn.click(obj)"
              >{{btn.name}}</zx-btn>
            </div>
          </template>
          <template v-else>{{obj[col.key]}}</template>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import ZxBtn from './ZxBtn'
export default {
  props: ["columns", "data"],
  data() {
    return {
      checkAll: false,
      checkSingle: [],
      isSort:{},
      nowData:this.data
    };
  },
  watch: {
    checkSingle() {
      this.checkAll = this.checkSingle.length == this.data.length;
      this.$emit("selectChange", this.checkSingle);
    },
    data() {
      this.checkSingle = [];
      this.nowData = [...this.data]
    }
  },
  methods: {
    checkAllFun() {
      this.checkAll = !this.checkAll;
      this.checkSingle = this.checkAll ? [...this.data] : [];
    },
    sortFun(key) {
      this.isSort[key] = (this.isSort[key]||0)+1
      if(this.isSort[key]%3==0){
        this.nowData = [...this.data]
        return
      }
      this.nowData.sort((a,b)=>{
        if(this.isSort[key]%3==1){
          return a[key]-b[key]
        } else if(this.isSort[key]%3==2) {
          return b[key]-a[key]
        }
      })
    }
  },
  components:{
    ZxBtn
  }
};
</script>

<style scoped>
.arrow{
  font-size: 8px;
  position: absolute;
  top: 1px;
  right: -10px;
}
span.down{
  top: 10px;
  transform:translate(0.5px,0) rotate(180deg);
}
span.active{
  color: red;
}
</style>
